// 方向
$direction: top, right, bottom, left;
// 边距
$spacing: 6rpx;
// 圆角
$rounded-size: 4rpx;
// 边框粗细
$border-size: 2rpx;
// 背景颜色
$color-list: (
    "white": #ffffff,
    "primary": $uni-color-primary,
    "success": $uni-color-success,
    "warning": $uni-color-warning,
    "error": $uni-color-error,
    "grey": $uni-bg-color-grey,
    "hover": $uni-bg-color-hover,
    "mask": $uni-bg-color-mask,
    "dark": #000010,
);
// 文字颜色
$text-color-list: (
    "default": $uni-text-color,
    "primary": $uni-color-primary,
    "white": #ffffff,
    "inverse": $uni-text-color-inverse,
    "error": $uni-color-error,
    "grey": $uni-text-color-grey,
    "placeholder": $uni-text-color-placeholder,
    "disable": $uni-text-color-disable,
    "price": #6cbe72,
    "dark": #000010,
);

.pb-safe-area {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.pt-safe-area {
    padding-top: var(--status-bar-height);
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

.pb-placeholder {
    padding-bottom: var(--window-bottom);
}

@for $i from 0 through 10 {
    .p-#{$i},
    .pl-#{$i},
    .px-#{$i} {
        padding-left: $spacing * $i;
    }

    .p-#{$i},
    .pr-#{$i},
    .px-#{$i} {
        padding-right: $spacing * $i;
    }

    .p-#{$i},
    .pt-#{$i},
    .py-#{$i} {
        padding-top: $spacing * $i;
    }

    .p-#{$i},
    .pb-#{$i},
    .py-#{$i} {
        padding-bottom: $spacing * $i;
    }

    .m-#{$i},
    .ml-#{$i},
    .mx-#{$i} {
        margin-left: $spacing * $i;
    }

    .m-#{$i},
    .mr-#{$i},
    .mx-#{$i} {
        margin-right: $spacing * $i;
    }

    .m-#{$i},
    .mt-#{$i},
    .my-#{$i} {
        margin-top: $spacing * $i;
    }

    .m-#{$i},
    .mb-#{$i},
    .my-#{$i} {
        margin-bottom: $spacing * $i;
    }
}

.flex {
    display: flex;

    &-wrap {
        flex-wrap: wrap;
    }

    @each $var in column, row {
        &-#{$var} {
            flex-direction: $var;
        }
    }

    @each $var in center, baseline, flex-start, flex-end {
        &-y-#{$var} {
            align-items: $var;
        }
    }

    @each $var in center, flex-start, flex-end, space-around, space-between, space-evenly {
        &-x-#{$var} {
            justify-content: $var;
        }
    }

    @for $i from 1 through 12 {
        &-#{$i} {
            flex: $i;
            min-width: 0;
        }
    }

    &-center {
        align-items: center;
        justify-content: center;
    }
}

@each $var in relative, absolute, fixed, sticky {
    .position-#{$var} {
        position: $var;
    }
}

@for $i from 1 through 20 {
    .h-#{$i * 5} {
        height: $i * 5%;
    }

    .w-#{$i * 5} {
        width: $i * 5%;
    }

    .vh-#{$i * 5} {
        height: $i * 5vh;
    }

    .vw-#{$i * 5} {
        width: $i * 5vw;
    }

    .vwh-#{$i * 5} {
        height: $i * 5vw;
    }
}

.bg {
    background-color: #f8f8f8;
}

@each $key, $color in $color-list {
    .bg-#{$key} {
        background-color: $color;
    }
}

.text {
    @each $key, $color in $text-color-list {
        &-#{$key} {
            color: $color;
        }
    }

    @each $var in nowrap, wrap {
        &-#{$var} {
            white-space: $var;
        }
    }

    @for $i from 1 through 5 {
        &-ellipsis-#{$i} {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical;
        }
    }

    @for $i from 1 through 5 {
        &-spacing-#{$i} {
            word-spacing: $i * 0.53333vw;
        }
    }

    @each $var in left, center, right {
        &-#{$var} {
            text-align: $var;
        }
    }
}

@each $i in $direction {
    .border,
    .border-#{$i} {
        border-#{$i}-width: $border-size;
        border-#{$i}-style: solid;
        border-#{$i}-color: $uni-border-color;
    }

    @each $key, $var in $color-list {
        .border-#{$key},
        .border-#{$i}-#{$key} {
            border-#{$i}-color: $var;
        }
    }
}

@for $i from 0 through 6 {
    @each $n in $direction {
        .border-#{$i},
        .border-#{$n}-#{$i} {
            border-#{$n}-width: $i * $border-size;
        }
    }
}

@each $i in dotted, dashed, double, groove, ridge, inset, outset {
    @each $n in $direction {
        .border-#{$i},
        .border-#{$n}-#{$i} {
            border-#{$n}-style: $i;
        }
    }
}

.rounded-circle {
    border-radius: 50%;
}

.rounded-round {
    border-radius: 200rpx;
}

@for $i from 0 through 6 {
    @if $i ==1 {
        .rounded,
        .rounded-left,
        .rounded-bottom-left {
            border-bottom-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-left,
        .rounded-top-left {
            border-top-left-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-bottom-right {
            border-bottom-right-radius: $i * $rounded-size;
        }

        .rounded,
        .rounded-right,
        .rounded-top-right {
            border-top-right-radius: $i * $rounded-size;
        }
    } @else {
        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-bottom-left-#{$i} {
            border-bottom-left-radius: $i * $rounded-size;
        }

        .rounded-#{$i},
        .rounded-left-#{$i},
        .rounded-top-left-#{$i} {
            border-top-left-radius: $i * $rounded-size;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-bottom-right-#{$i} {
            border-bottom-right-radius: $i * $rounded-size;
        }

        .rounded-#{$i},
        .rounded-right-#{$i},
        .rounded-top-right-#{$i} {
            border-top-right-radius: $i * $rounded-size;
        }
    }
}

.font-weight {
    &-bold {
        font-weight: bold;
    }

    &-normal {
        font-weight: normal;
    }

    @for $i from 1 through 9 {
        &-#{$i * 100} {
            font-weight: $i * 100;
        }
    }
}

@for $i from 1 through 10 {
    .h#{$i} {
        font-size: 8vw - ($i * 0.53333vw);
    }
}

@each $i in hidden, visible, auto, scroll {
    .overflow-#{$i},
    .overflow-x-#{$i} {
        overflow-x: $i;
    }

    .overflow-#{$i},
    .overflow-y-#{$i} {
        overflow-y: $i;
    }
}

image {
    vertical-align: middle;
}

.border-box {
    box-sizing: border-box;
}

.w-button {    
    background: linear-gradient(to right, var(--theme-color),var(--theme-active-color));
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    padding: 8rpx 0;
    &:active {
        color: #fff;
        background: var(--theme-color);
    }
}
